<template>
	<view class="tab">
		<template v-for="(item,index) in list" :key="index">
			<view :class="['tab-item',{'tab-item-active':index==tabIndex}]" @click="changeTab(item,index)">
				<text>{{item.name}}</text><text>({{item.num}})</text>
			</view>
		</template>
	</view>
</template>
<script>
	export default {
		props: {
			list: Array
		},
		data(){
			return {
				tabIndex: 0
			}
		},
		methods: {
			changeTab(item,index) {
				this.tabIndex = index;
				this.$emit('change', item)
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.tab {
		@include flex(row, flex-start);
		align-items: center;
		&-item {
			margin-right: 17rpx;
			padding: 12rpx 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid #ECECEC;
			background-color: #F5F5F5;
			font-size: 24rpx;
			color: #888;
			&-active {
				color: $color;
				border-color: $color;
				background-color: #FFF5E5;
			}
		}
	}
</style>
